<template>
	<view class="page-content" >
		<u-sticky bgColor="#fff">
			<u-navbar :is-back="false"  title="湖北移动网络运营看板-投诉"  :background="background" title-color="#000" :border-bottom="true">
			</u-navbar>
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#1B9CFF" inactive-color="#A7ABBB" @change="change"></u-tabs>
		</u-sticky>
		<!-- 管理员 -->
		<template v-if="role === '0'">
			<TOC-admin v-if="current === 0" :permissionData="permissionData"/>
			<TOH-admin v-if="current === 1" :permissionData="permissionData"/>
			<TOB-admin v-if="current === 2" :permissionData="permissionData"/>
		</template>
	</view>
</template>

<script>
	
	import $ from 'common/utils/jquery-3.5.1.min.js'
	import TOCAdmin from "./components/TOC.vue"
	import TOHAdmin from "./components/TOH.vue"
	import TOBAdmin from "./components/TOB.vue"
	export default {
		components: {
			TOCAdmin,
			TOHAdmin,
			TOBAdmin
		},
		watch: {
		    '$route'(to, from) {
		      if (to.path === '/pagesJK/complaintPage/index') {
				    this.$nextTick(() => {
						this.current = this.$route.query.current || 0
						uni.pageScrollTo({
						  scrollTop: 0, // 滚动到目标元素的位置
						  duration: 0 // 滚动动画持续时间，单位ms
						});
					});
		      }
		    }
		  },
		data() {
			return {
				list: [],
				current: 0,
				role: '0',
				permissionData:[],
				tableHeight: '',
				background: {
					backgroundColor: '#fff'
				}
			}
		},
		mounted() {
			if (this.role == '0') {
				this.list = [{
					name: 'ToC'
				}, {
					name: 'ToH'
				}, {
					name: 'ToB'
				}]
			}
			this.$nextTick(() => {
				this.current = this.$route.query.current || 0
			});
		},
		created () {
			
		},
		methods: {
			change(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-sticky{
		width: 100% !important;
	}
	.page-content {
	}
	/deep/ .u-navbar-content-title{
		width: 550rpx !important;
		left: 100rpx !important;
		right: 100rpx !important;
	}
</style>